<template>
	<view class="content" >
		<view class="loading" v-if="loadingShow">
			<u-loading mode="circle" size="46"></u-loading><text class="loading-text">加载中...</text>
		</view>
		<my-home class="home-float" v-if="floatData.open == 1" :floatData="floatData" :floatX="floatX" :floatY="floatY" :floatFrom="20"></my-home>
		<common-picker @confirm="handleConfirm"></common-picker>
		<!--list-->
		<view class="list" v-if="list.length">
			<u-collapse :head-style="titleStyle" hover-class="none" :item-style="listStyle" :accordion="false">
					<u-collapse-item :disabled="item.status==1" v-for="(item,index) in list" :key="index">
						<template slot="title">
							<view v-if="item.status==1" class="disabled-view" @click="handleDisabledClick(index)"></view>
							<view class="list-title-left">
								<view class="title-left-time">{{item.start_time}}</view>
							</view>
							<view class="list-title-right">
								<view v-if="item.status==1" class="charging-title">{{item.title}}</view>
								<view v-else-if="item.status==2">{{item.title}}</view>
								<view v-else class="fault-title">{{item.name}}</view>
								<!-- <view v-else class="fault-title">{{item.status|chargingRecordFilter}}</view> -->
							</view>
						</template>
						<!--充电完成类型-->
						<template v-if="item.status==2">
							<view class="list-content-wrap">
								<view class="list-content">
									<view class="list-content-top">
										{{item.detil.title}}
									</view>
									<view class="content-row">
										<view class="content-row-item">
											<u-row v-for="(val,i) in item.detil.original" :key="i">
												<u-col span="6">
													<view class="row-left row-left-01">{{val.name}}</view>
												</u-col>
												<u-col span="6">
													<view class="row-right-01 row-right">{{val.value}}</view>
												</u-col>
											</u-row>
											<!-- <u-row v-if="item.detil.insure_money != 0">
												<u-col span="6">
													<view class="row-left row-left-01">充电无忧服务费</view>
												</u-col>
												<u-col span="6">
													<view class="row-right-01 row-right">{{item.detil.insure_money/100}}币</view>
												</u-col>
											</u-row> -->
										</view>
										<view class="content-row-item" v-if="item.detil.sale.length">
											<u-row  v-for="(content,k) in item.detil.sale" :key="k">
												<u-col span="6">
													<view class="row-left row-left-02">{{content.name}}</view>
												</u-col>
												<u-col span="6">
													<view class="row-right-02 row-right">{{content.value}}</view>
												</u-col>
											</u-row>
										</view>
										<view class="content-row-item"  v-if="item.detil.debit.length">
											<u-row v-for="(v,j) in item.detil.debit" :key="j">
												<u-col span="8">
													<view class="row-left row-left-03"><text>{{v.name}}</text><text class="red-txt">{{item.detil.remark}}</text></view>
												</u-col>
												<u-col span="4">
													<view class="row-right-03 row-right">
														<text>{{v.value}}</text><text></text>
													</view>
												</u-col>
											</u-row>
										</view>
									</view>
								</view>
							</view>
						</template>
						<!--其它类型样式一样-->
						<template v-else>
							<view class="fault">
								{{ item.status==1 || item.status== 2 ? item.name : item.title}}
							</view>
						</template>	
					</u-collapse-item>
			</u-collapse>
			<!--loadmore-->
			<view class="loadmore" v-if="loadmoreShow">
				<u-loadmore :status="loadmoreStatus" icon-type="flower" />
			</view>
		</view>
		
		<no-data v-if="list && list.length==0" :src="noDataSrc" :txt="noDataTxt"></no-data>
		<uv-back :scroll="scrollTop"></uv-back>
		<view class="bottom-safe-area"></view>
		<!--单悬浮客服-->
		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pickerTime:'',//currently selected time
				//list
				titleStyle:{
					position:'relative',
					paddingRight:'10rpx',
					paddingLeft:'30rpx',
					background:'#fff',
				},
				listStyle:{
					marginTop:'14rpx',
				},
				list:'',
				page:1,//当前页码，默认1
				pageSize:20,
				total:0,//总条数
				loadmoreStatus:'loading',//上拉分页底部提示组件
				loadmoreShow:false,
				//no-data
				noDataSrc:this.$noData,
				noDataTxt:'暂无充电记录',
				//back to the top
				scrollTop:0,
				floatData:{} ,
				floatX:300,
				floatY:80,
				clientHeight:null,
				//loading
				loadingShow:false,
			}
		},
		//back to the top
		onPageScroll(e){
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			
			if (uni.getStorageSync('userId')) { 
				this.getListRequest();
			} else {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			};
			this.getClineHeight();
		},
		onReachBottom(){
			if(this.loadmoreShow){return false;}
			this.loadmoreShow=true;
			if(this.page<Math.ceil(this.total/this.pageSize)){

				this.page++;
				this.getListRequest();
			}else{
				//no more
				this.loadmoreStatus='nomore';
				this.loadmoreShow=true;
			}
		},
		methods: {
			getBarHeight(){
			        const res = uni.getSystemInfoSync()
			        if(res.platform==='ios'){
			            return 44+res.statusBarHeight
			        }else if(res.platform==='android'){
			            return 48+res.statusBarHeight
			        }else{
			            return 0;
			        }
			    },
			    //获取可视区域高度
			    getClineHeight(){
			        const res = uni.getSystemInfo({
			            success:(res=>{
			                this.clientHeight = res.windowHeight-uni.upx2px(80)-this.getBarHeight();
							this.floatY =  this.clientHeight - 50;
			            })
			        });
			    },
			_reset(){
				this.page=1;
				this.loadmoreShow=false;
				this.loadmoreStatus='loading';
				this.total=0;
				this.list='';
			},
			handleConfirm(param){
				this._reset();
				this.pickerTime=param.date;
				this.getListRequest();
			},
			getListRequest(){
				this.loadingShow = true;
				const arr = this.page == 1 ? [] : this.list;
				this.$u.api.getChargingRecord({
					
					time:this.pickerTime,
					page_index:this.page,
				}).then(res=>{
					this.loadingShow = false;
					if(res.result_code==300){
						this.floatData = res.data.window;
						const list = [...arr,...res.data.list];
						this.list=list;
						this.total=res.data.total;
						
					}else{
						this.$utils.modal({
							content:res.msg,
							showCancel:false,
							callback:(bool)=>{

							}
						});
					};
					this.loadmoreShow=false;
				}).catch(()=>{
					this.loadmoreShow=false;
				});
			},
			handleDisabledClick(index){
				
				let id=this.list[index].user_log_id;
				uni.navigateTo({
					url: "/pages/charge/charging?status=1&id="+id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top:100rpx;
	}
	.loading {
		position: fixed;
		top: 48%;
		left: 48%;
	} 
	.loading-text {
		margin-left: 5rpx;
	}
	.home-float {
		position: fixed;
		z-index: 99;
		bottom: 100rpx;
		right: 50rpx;
	}
	.list-title-left{
		font-size:26rpx;
		font-weight: 500;
		color: #333;
		
	}
	.title-left-time{
		line-height: 32rpx;
		position: relative;
		top:2rpx;
	}
	.list-title-right{
		position: absolute;
		right:80rpx;
		top:50%;
		transform:translateY(-50%);
		font-size: 24rpx;
		font-weight: 500;
		color: #0DA297;
		line-height:1;
	}
	.charging-title{
		font-size: 26rpx;
	}
	.list-content-wrap{
		padding:30rpx 50rpx 10rpx 30rpx;
	}
	.fault{
		padding:20rpx 30rpx;
		font-size: 26rpx;
		color:#666;
		line-height:1;
	}
	.list-content{
		border: 2rpx solid #333333;
		border-radius: 32rpx;
		overflow: hidden;
	}
	.list-content-top{
		background-color:#333;
		padding:10rpx 30rpx;
		color:#fff;
		font-size:24rpx;
		
	}
	.content-row{
		padding:20rpx;
		font-size: 24rpx;
		padding-bottom: 0;
		
	}
	.content-row-item:nth-child(2){
		border-top:2rpx solid #333;
		padding:10rpx 0;
		margin:10rpx 0; 
	}
	.content-row-item:nth-child(3){
		border-top:2rpx solid #333;
		padding:16rpx 0;
	}
	.row-right{
		text-align: right;
		padding:10rpx 0;
	}
	.row-left{
		padding:10rpx 0;
	}
	.row-left-01{
		color:#333;
	}
	.row-right-01{
		color:#000;
		font-weight: 600;
	}
	.row-left-02{
		color:#f00;
	}
	.row-right-02{
		color:#f00;
		font-weight: 600;
	}
	.row-right-03{
		color:#0DA297;
		font-size:40rpx;
		line-height: 1;
		
	}
	.row-left-03{
		color:#f00;
	}
	.row-right-03 text:nth-child(2){
		font-size: 28rpx;
	}
	.red-txt{
		color:#f00;
	}
	.list-title-right .fault-title{
		color:#f00;
	}
	.disabled-view{
		width:100%;
		height:100%;
		background-color:rgba(255,255,255,0);
		position: absolute;
		left:0;
		top:0;
		z-index:100;
	}
	.loadmore{
		padding:30rpx 0;
	}
</style>
<style>
	page{
		background: #F4F4F4;
	}
</style>
